<template>
    <view v-if="datalist.states">
        <view class="topBox">
            <view class="successIcon" v-if="datalist.states == 1"><u-icon name="checkmark" size="30" color="#fff"></u-icon></view>
            <view class="errorIcon" v-else><u-icon name="close" size="30" color="#fff"></u-icon></view>
            <view class="title">
                <view class="fwb fs36">
                    实付款 ￥ {{ priceFrom(datalist.total_fee) }}
                    <text v-if="datalist.sum" class="fs24 c9">应付款{{ priceFrom(datalist.sum) }}</text>
                </view>
                <view class="c9 fs24" v-if="datalist.states == 1">请等待商家配送</view>
                <view class="fs24 cr" v-else>订单异常,请联系管理员</view>
            </view>
            <view class="success" v-if="datalist.states == 1">已完成</view>
        </view>
        <view class="pd20">
            <view class="card" v-if="datalist">
                <view class="tag">
                    <u-icon name="clock" color="#fff"></u-icon>
                    &nbsp;商家外送
                </view>
                <view class="msg">
                    <view class="title">订单信息</view>
                    <view class="content">订单编号&nbsp;{{ datalist.order_no }}</view>
                    <view class="content">下单时间&nbsp;{{ timeFormat(datalist.createTime) }}</view>
                    <view class="content">支付方式 {{ payStyle }}</view>
                </view>
                <view class="msg" v-if="datalist.address">
                    <view class="title">收货地址</view>
                    <view class="content">{{ datalist.address.address }}{{ datalist.address.addressMsg }}</view>
                    <view class="content">{{ datalist.address.name }}-{{ datalist.address.phone }}</view>
                </view>
            </view>
            <goods-list :list="datalist.cardList" :count="datalist.total_fee"></goods-list>
        </view>
    </view>
    <view v-else class="mgt40"><u-empty mode="data"></u-empty></view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import { priceFrom, timeFormat } from '../../../utils/tools.js';

const orderObj = uniCloud.importObject('mall-order');
const datalist = ref([]);
const getData = async (id) => {
    let res = await orderObj.getOne(id);
    datalist.value = res.data[0];
};
const payStyle = computed(() => {
    if (datalist.value.provider == 'wxpay') {
        return '微信支付';
    } else if (datalist.value.provider == 'alipay') {
        return '支付宝支付';
    }
});
onLoad((e) => {
    if (e.id) {
        getData(e.id);
    }
});
</script>

<style scoped lang="scss">
.topBox {
    display: flex;
    padding: 20rpx;
    position: relative;

    .showIconP {
        border-radius: 50%;
        width: 80rpx;
        height: 80rpx;
        @include flex-box-set();
        margin-right: 20rpx;
    }

    .successIcon {
        @extend .showIconP;
        background-color: $uni-color-success;
    }

    .errorIcon {
        @extend .showIconP;
        background-color: red;
    }

    .success {
        width: 150rpx;
        height: 150rpx;
        border: 6rpx solid #999;
        border-radius: 50%;
        font-size: 32rpx;
        color: #999;
        font-weight: bold;
        @include flex-box-set();
        transform: rotate(-20deg);
        position: absolute;
        top: 80rpx;
        right: 100rpx;

        &::after {
            display: block;
            content: '';
            border: 2rpx solid #999;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform: scale(0.89);
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
        }
    }
}

.card {
    padding: 20rpx;
    margin: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    background-color: #fff;

    .tag {
        border-radius: 40rpx;
        font-size: $uni-font-size-sm;
        padding: 5rpx 10rpx;
        background-color: $uni-color-success;
        color: #fff;
        display: inline-flex;
    }

    .msg {
        margin-top: 10rpx;

        &:last-child {
            margin-top: 60rpx;
            margin-bottom: 20rpx;
        }

        .title {
            font-size: $uni-font-size-lg;
        }

        .content {
            font-size: $uni-font-size-sm;
            color: $uni-color-grey;
            margin-top: 10rpx;
        }
    }
}
</style>
